<template>
  <div class="task">
    <TitleBar :date.sync="date"/>
    <div class="task__main">
      <TaskBox class="box-task task__main--rank1" rank="rank-1" :date='date'></TaskBox>
      <TaskBox class="box-task task__main--rank2" rank="rank-2" :date='date'></TaskBox>
      <TaskBox class="box-task task__main--rank3" rank="rank-3" :date='date'></TaskBox>
      <TaskBox class="box-task task__main--rank4" rank="rank-4" :date='date'></TaskBox>
      <AddTask class="add-task"/>
    </div>
  </div>
</template>

<script>
import TitleBar from './TitleBar.vue'
import TaskBox from './TaskBox.vue'
import AddTask from './AddTask.vue'

export default {
  name: 'Task',
  data () {
    return {
      date: new Date('Sat May 26 2018 00:00:00 GMT+0800')
    }
  },
  components: {
    TitleBar,
    TaskBox,
    AddTask
  }
}
</script>

<style lang="stylus">
  .add-task
    position: fixed
    right: 5px
    top: 67px
    border: solid 1px #2BBFF3
    padding: 10px
    height: calc(100% - 96px)
  .task__main
    height: calc(100% - 60px)
    margin: 10px 0px 10px 10px
    padding-right: 310px
    .task__main--rank1
      color #F76333
      border 1px solid #f76333
    .task__main--rank2
      color #FEAE6A
      border 1px solid #FEAE6A
    .task__main--rank3
      color #3FB6DA
      border 1px solid #3FB6DA
      margin-top 10px
    .task__main--rank4
      color #89C557
      border 1px solid #89C557
      margin-top 10px
  .box-task
    width: calc(50% - 15px)
    height: calc(50% - 10px)
    float: left
    margin-right: 10px
</style>
